<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <%@ taglib prefix="sw" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Egicom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.url), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<script language="javascript" type="text/javascript">

function choix(menu_gauche)
{

src = "";

if (menu_gauche.photos[0].checked)
src = "images/product_01.png";
if (menu_gauche.photos[1].checked)
src = "images/product_02.png";
if (menu_gauche.photos[2].checked)
src = "images/product_03.png";
if (menu_gauche.photos[3].checked)
src = "images/product_04.png";

def = "";

if (menu_gauche.photos[0].checked)
def = "KitGrafik";
if (menu_gauche.photos[1].checked)
def = "Zebu Francophone";
if (menu_gauche.photos[2].checked)
def = "EJS";
if (menu_gauche.photos[3].checked)
def = "Vacanceo";

siz = "";
/*
Copier les lignes suivante autant qu'il y a d'images (remplacer +1 par le chiffre adapter, il doivent être croissant de 0 à l'infini):
if (menu_gauche.photos[+1].checked)
siz = "width='500' height='400'";
*/
if (menu_gauche.photos[0].checked)
siz = "";
if (menu_gauche.photos[1].checked)
siz = "";
if (menu_gauche.photos[2].checked)
siz = "";
if (menu_gauche.photos[3].checked)
siz = "";

/*
Vous pouver modifier la taille de l'image : width='500' height='400'
					 la mise en forme du texte : <b><font size='+1'>
Attention à bien respecter les différentes syntaxes ' et "
*/
DinaImg = "<img src='" + src + "'" + siz +"><br><b>" + def + "</b>";
which2 = DinaImg
if (document.getElementById){
document.getElementById("photo").innerHTML=which2;
}
}
</script>
<script language="javascript" type="text/javascript">
function clearText(field) {
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>
<script language="javascript" type="text/javascript" src="scripts/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="scripts/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="scripts/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
    'domready': function () { /* thumbnails example , div containers */
        new SlideItMoo({
            overallContainer: 'SlideItMoo_outer',
            elementScrolled: 'SlideItMoo_inner',
            thumbsContainer: 'SlideItMoo_items',
            itemsVisible: 5,
            elemsSlide: 3,
            duration: 200,
            itemsSelector: '.SlideItMoo_element',
            itemWidth: 140,
            showControls: 1
        });
    },

});
</script>
</head>
<body>
<div id="wrapper">
  <div id="menu">
    <ul>
      <li><a href="#" class="current"><span></span>Accueil</a></li>
      
    </ul>
	
  </div>
  <!-- end of menu -->
  
  <div id="header_bar">
  
    <div id="header">
	
      <div class="right"></div>
      <h1><a href="#"> <img src="images/logo.png" alt="" /> <span>EGICOM V1.0</span> </a></h1>
	  
    </div>
	
    <div id="search_box">
      <form action="#" method="get">
	      
	      
        <input type="text" value="Produit..." name="q" size="10" id="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
		
        <input type="submit" name="Search" value="" alt="Search" id="searchbutton" />
		<select name="thelist" id="submit_btn" >
			<option>Catégorie</option>
		</select>
		
      </form>
	  <!-- <input type="submit" name="login" value="Se Connecter" alt="Login" id="submit_btn" />-->
    </div>
	<div id="panier">
		<input type="submit" name="panier" value="Panier" id="submit_btn" />
	 </div>
  </div>
  <!-- end of header_bar -->
  
  <div class="cleaner"></div>
  <div id="sidebar">
    <div class="sidebar_top"></div>
    <div class="sidebar_bottom"></div>
    <div class="sidebar_section">
      <h2>Membres</h2>
      <form action="#" method="get">
        <label>E-mail</label>
        <input type="text" value="" name="username" size="10" class="input_field" />
        <label>Mot-de-passe</label>
        <input type="password" value="" name="password" class="input_field" />
        <a href="#">S'inscrire</a>
        <input type="submit" name="login" value="Se Connecter" alt="Login" id="submit_btn" />
      </form>
      <div class="cleaner"></div>
    </div>
      <div class="sidebar_section">
      <h2>Categories</h2>
      <ul class="categories_list">
      	<sw:forEach items="${listeCategories}" var="o" >
        	<li><a href="#">${o.libeleCategorie}</a></li>
		</sw:forEach>
       
      </ul>
    </div>
   
  </div>
  <!-- end of sidebar -->
  <div id="content">
    <div id="latest_product_gallery">
      <h2>Nouveaux Produits</h2>
      <div id="SlideItMoo_outer">
        <div id="SlideItMoo_inner">
          <div id="SlideItMoo_items">
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_01.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_02.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_03.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_04.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_05.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_06.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_07.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="images/product_08.png" alt="" /></a> </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end of latest_content_gallery -->
    <div class="content_section">
      <h2>Bienvenue à EGICOM</h2>
      
    </div>
   
      <h2>Créer nouveau produit : </h2>
	
	  <form action="#" method="get" name="menu_gauche">
		<table>	
	  <tr>
	  <td>
	  
        <label>libellé:</label></td>
       <td> <input type="text" value="" name="libellé" size="10" class="input_field" />
        </td>
		</tr>
		
		<tr>
	  <td>
	  
        <label>decription:</label></td>
       <td> <input type="text" value="" name="decription" size="10" class="input_field" />
        </td>
		</tr>
		<br/>
		<tr>
	  <td>
        <label>prix:</label></td>
       <td> <input type="text" value="" name="prix" size="10" class="input_field" />
        </td>
		</tr>
		<br/>
		<tr>
	  <td>
        <label>quantité disponible:</label></td>
       <td> <input type="text" value="" name="quantité disponible" size="10" class="input_field" />
        </td>
		</tr>
		<br/>
		
		<tr>
	  <td>
        <label>taxe:</label></td>
      
		</tr>
		<br/>
		<tr>
	  
   
		</tr>
		<tr>
		
		<td> <label>image: </label> </td>
		<td>         <input type="submit" name="parcourir" value="Parcourir"  /> 
		<!-- pour cette action j'ai réalisé une fonction en java qui permet de parcourir 
		choisir une image et l'enregister f la base d donné j doi l'applé -->
		</td>
   
			</tr>			       
		
		<tr>
	  <td>
        <input type="submit" name="creer" value="Créer" id="submit_btn" /></td>
       <td><input type="submit" name="annuler" value="Annuler" id="submit_btn" />
        </td>
		</tr>
		
		</table>
      </form>
      
 
  <!-- end of content -->
</div>
<!-- end of wrapper -->
 <div id="footer_wrapper">
  <div id="footer">
    
    Copyright &copy; 2013 <a href="#">EGICOM</a> | Designed by <a href="http://www.templatemo.com/">egicom</a></div>
  <!-- end of footer -->
</div> 
<!-- end of footer_wrapper -->


</body>
</html>
